<template>
  <BdpLayout>
    <!-- <BdpLayoutPanel :width="width">
      <div style="height: calc(100% - 58px); overflow-y: auto">
        <Btree
          :tree-data="treeData"
          :replace-fields="{ children: 'children', title: 'label', key: 'value' }"
          :expanded-keys="expandedKeys"
          :default-expanded-keys="defaultExpandedKeys"
          @expand="handleExpand"
          @select="treeSelect"
          v-on="$listeners"
          :showIcon="true"
          v-bind="$attrs"
          title="组织机构树"
        >
          <template #title="item">
            <span> <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.65)" />{{ item.title }}</span>
          </template>
        </Btree>
      </div>
    </BdpLayoutPanel> -->
    <BdpLayoutPanel
      style="overflow-y: auto; scrollbar-width: none; overflow-x: hidden; margin-top: 20px"
      :left="width"
      resize="H"
    >
      <BdpLayoutPanel height="40" resize="V" resizePosition="bottom" style="text-align: right">
        <el-row style="text-align: right">
          <span style="margin-right: 4px; display: inline-block">自动刷新：</span>
          <a-switch v-model="autoRefresh" />
          <a-select v-model="refreshInterval" style="width: 100px; margin-left: 10px" v-if="autoRefresh">
            <a-select-option :value="60">1分钟</a-select-option>
            <a-select-option :value="120">2分钟</a-select-option>
            <a-select-option :value="180">3分钟</a-select-option>
          </a-select>
        </el-row>
      </BdpLayoutPanel>
      <BdpLayoutPanel :top="40" height="100px" resize="V" resizePosition="bottom">
        <BdpLayoutPanel width="33.33%" resize="H" resizePosition="right"></BdpLayoutPanel>
        <BdpLayoutPanel left="33.33%" width="33.33%" resize="H" resizePosition="right"></BdpLayoutPanel>
        <BdpLayoutPanel left="66.67%" width="33.33%" resize="H"></BdpLayoutPanel>
        <div class="container">
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              物料总数
              <div class="number">{{ num }}</div>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              可用库存总数
              <div class="number">{{ availableCount }}</div>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              质检库存
              <div class="number">{{ inQaStockCount }}</div>
            </div>
          </div>
        </div>
      </BdpLayoutPanel>
      <BdpLayoutPanel :top="140" height="600" resize="V">
        <div style="width: 100%; margin-top: 20px; padding: 5px">
          <a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 16px">
            <a-col :span="6">
              <span style="margin-right: 4px; display: inline-block">物料编码：</span>
              <a-input-search v-model="wlbm" style="width: 60%; display: inline-block" />
            </a-col>
            <!-- <a-col :span="6">
              <span style="margin-right: 4px; display: inline-block">库存地点：</span>
              <a-input-search v-model="storageLocation" style="width: 60%; display: inline-block" />
            </a-col> -->
            <a-col :span="6">
              <span style="margin-right: 4px; display: inline-block">供应商批次：</span>
              <a-input-search v-model="licha" style="width: 60%; display: inline-block" />
            </a-col>
            <a-col :span="6" style="text-align: left">
              <a-button type="primary" @click="handelSearch">搜索</a-button>
              <a-button style="margin-left: 4px" @click="resetFields">重置</a-button>
            </a-col>
          </a-row>
        </div>
        <a-table
          ref="table"
          :columns="columns"
          :data-source="data"
          rowKey="sapMatNo"
          :pagination="pagination"
          :scroll="{ x: 1500, y: 400 }"
          @change="handleTableChange"
          style="margin-top: 20px; height: auto"
        >
        </a-table>
      </BdpLayoutPanel>
    </BdpLayoutPanel>
  </BdpLayout>
</template>
<script>
import Btree from '@bdp-comp/antdesign/btree/index';
import { getOdsTreeByType } from '@bdp/dataDetails/personnelInformation/api';
import { getGmdcMaterialCount, getGmdcMaterialPage } from '@bdp/dataDetails/componentInformation/api';

export default {
  name: 'DirectoryMaintenance',
  components: {
    Btree,
  },
  permissionList: [],
  data() {
    return {
      autoRefresh: false,
      refreshInterval: 60, // 默认1分钟
      refreshTimer: null, // 用于存储定时器
      expandedKeys: [], // 当前展开的节点
      defaultExpandedKeys: [], // 默认展开的节点
      licha: '',
      wlbm: '',
      storageLocation: '',
      availableCount: 0,
      inQaStockCount: 0,
      num: 0,
      width: 0,
      height: 300,
      treeData: [],
      treePath: null,
      value: '',
      strValue: '',
      pagination: {
        current: 1,
        pageSize: 10,
        total: 50, // 总条数
        showSizeChanger: true,
        showQuickJumper: true,
        right: 0,
        bottom: 0,
      }, //表格分页
      columns: [
        {
          title: '项目代码',
          dataIndex: 'projectCode',
          key: 'projectCode',
          width: 120,
          align: 'center',
        },
        {
          title: 'SAP批次',
          dataIndex: 'batchCode',
          key: 'batchCode',
          width: 120,
          align: 'center',
        },
        // {
        //   title: '库存地点',
        //   dataIndex: 'storageLocation',
        //   key: 'storageLocation',
        //   width: 120,
        //   align: 'center',
        // },
        {
          title: '货架到期寿命',
          dataIndex: 'vfdat',
          key: 'vfdat',
          width: 120,
          align: 'center',
        },
        {
          title: '可用库存',
          dataIndex: 'availableStock',
          key: 'availableStock',
          width: 120,
          align: 'center',
        },
        {
          title: '质检库存',
          dataIndex: 'inQaStock',
          key: 'inQaStock',
          width: 120,
          align: 'center',
        },
        {
          title: '基本计量单位',
          dataIndex: 'unit',
          key: 'unit',
          width: 120,
          align: 'center',
        },
        {
          title: '供应商批次',
          dataIndex: 'licha',
          key: 'licha',
          width: 120,
          align: 'center',
        },
        {
          title: '供应商批次补充',
          dataIndex: 'atwrt',
          key: 'atwrt',
          width: 120,
          align: 'center',
        },
        {
          title: '物料编码',
          dataIndex: 'wlbm',
          key: 'wlbm',
          fixed: 'left',
          width: 120,
          align: 'center',
        },
        {
          title: '物料类型',
          dataIndex: 'mattype',
          key: 'mattype',
          width: 120,
          align: 'center',
        },
        {
          title: '物料名称',
          dataIndex: 'matname',
          key: 'matname',
          width: 150,
          align: 'center',
        },
        {
          title: '可用库存',
          dataIndex: 'availableStock',
          key: 'availableStock',
          width: 150,
          align: 'center',
        },
        {
          title: '基本单位',
          dataIndex: 'unit',
          key: 'unit',
          width: 100,
          align: 'center',
        },
        {
          title: '物料组',
          dataIndex: 'matgroup',
          key: 'matgroup',
          width: 120,
          align: 'center',
        },
        {
          title: '工厂',
          dataIndex: 'plant',
          key: 'plant',
          width: 100,
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createtime',
          key: 'createtime',
          width: 150,
          align: 'center',
        },
        {
          title: '修改时间',
          dataIndex: 'changedate',
          key: 'changedate',
          width: 150,
          align: 'center',
        },
        {
          title: '删除标记',
          dataIndex: 'delsign',
          key: 'delsign',
          width: 100,
          align: 'center',
        },
        {
          title: '牌号',
          dataIndex: 'rawsize',
          key: 'rawsize',
          width: 100,
          align: 'center',
        },
        {
          title: '规格',
          dataIndex: 'trait1',
          key: 'trait1',
          width: 100,
          align: 'center',
        },
        {
          title: '型',
          dataIndex: 'trait2',
          key: 'trait2',
          width: 100,
          align: 'center',
        },
        {
          title: '类',
          dataIndex: 'trait3',
          key: 'trait3',
          width: 100,
          align: 'center',
        },
        {
          title: '级',
          dataIndex: 'trait4',
          key: 'trait4',
          width: 100,
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'trait5',
          key: 'trait5',
          width: 100,
          align: 'center',
        },
        {
          title: '色号',
          dataIndex: 'trait6',
          key: 'trait6',
          width: 100,
          align: 'center',
        },
        {
          title: '材料形式',
          dataIndex: 'trait7',
          key: 'trait7',
          width: 100,
          align: 'center',
        },
        {
          title: '规范',
          dataIndex: 'trait8',
          key: 'trait8',
          width: 100,
          align: 'center',
        },
        {
          title: 'ZPM',
          dataIndex: 'trait9',
          key: 'trait9',
          width: 100,
          align: 'center',
        },
        {
          title: '供应商牌号',
          dataIndex: 'trait10',
          key: 'trait10',
          width: 120,
          align: 'center',
        },
        {
          title: '供应商版次',
          dataIndex: 'trait11',
          key: 'trait11',
          width: 120,
          align: 'center',
        },
        {
          title: '用途',
          dataIndex: 'trait12',
          key: 'trait12',
          width: 100,
          align: 'center',
        },
        {
          title: '版次',
          dataIndex: 'trait13',
          key: 'trait13',
          width: 100,
          align: 'center',
        },
        {
          title: '其他',
          dataIndex: 'trait14',
          key: 'trait14',
          width: 100,
          align: 'center',
        },
      ],
      data: [],
    };
  },
  mounted() {
    // this.getTreeData();
    //初始化列表数据
    this.getTableList();
    //初始化卡片上数据
    this.initIndexCard();
    console.log('treeData', this.treeData);
  },
  watch: {
    autoRefresh(newVal) {
      if (newVal) {
        console.log(newVal);
        this.startAutoRefresh();
      } else {
        this.stopAutoRefresh();
      }
    },
    refreshInterval() {
      this.restartAutoRefresh(); // 刷新间隔改变时重启定时器
    },
  },
  methods: {
    startAutoRefresh() {
      console.log('开始刷新');
      this.refreshTimer = setInterval(() => {
        this.getTableList();
        this.initIndexCard();
      }, this.refreshInterval * 1000);
    },
    stopAutoRefresh() {
      console.log('停止刷新');
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
        this.refreshTimer = null;
      }
    },
    restartAutoRefresh() {
      this.stopAutoRefresh();
      if (this.autoRefresh) {
        this.startAutoRefresh();
      }
    },
    // 处理节点展开和折叠
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
    /** 查询*/
    handelSearch() {
      this.getTableList();
      console.log('查询参数：', this.searchForm);
    },
    /** 重置按钮*/
    resetFields() {
      (this.wlbm = ''), (this.storageLocation = ''), (this.licha = ''), (this.pagination.current = 1);
      this.getTableList();
    },
    /** 分页 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.current = pagination.current;
      this.getTableList();
      console.log(pagination);
    },
    // 查询树节点数据
    async getTreeData() {
      getOdsTreeByType(0).then((res) => {
        let result = res.data;
        if (result.length > 0) {
          this.treeData = result;
        } else {
          //初始化根节点
          this.initRootData();
        }
      });
      function recursion(arr) {
        console.log(this.expandedKeys);
        arr.forEach((item) => {
          this.expandedKeys.push(item.id);
          if (Array.isArray(item.children)) {
            recursion.call(this, item.children);
          }
        });
      }
    },
    //刷新树
    refreshTree() {
      this.getTreeData();
    },
    // 选择节点
    treeSelect(treeNode) {
      if (treeNode) {
        this.treePath = treeNode.value;
        this.initIndexCard();
        this.getTableList();
      } else {
        this.treePath = '-1';
      }
    },
    //列表数据
    getTableList() {
      getGmdcMaterialPage({
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        groupId: this.treePath,
        licha: this.licha,
        wlbm: this.wlbm,
        storageLocation: this.storageLocation,
      }).then((res) => {
        this.data = res.data.list;
        this.pagination.total = res.data.total;
        this.$nextTick(() => {
          // 数据更新后重新计算表格布局
          this.$refs.table.resize();
        });
      });
    },
    // 指标卡数据
    initIndexCard() {
      getGmdcMaterialCount({ groupId: this.treePath }).then((res) => {
        this.availableCount = res.data.availableCount;
        this.inQaStockCount = res.data.inQaStockCount;
        this.num = res.data.num;
      });
    },

    //初始化根节点
    initRootData() {
      this.$confirm({
        title: `初始化根节点`,
        content: `是否初始化根节点？`,
        cancelText: '取消',
        onOk: () => {
          insertRoot()
            .then((response) => {
              if (response.code === '200') {
                this.$message.success('初始化根节点成功！');
                this.getTreeData();
              } else {
                this.$message.warning('删除失败');
              }
            })
            .catch();
        },
        onCancel() {},
      });
    },
    draggingover(len) {
      this.width = len;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px; /* 控制卡片之间的间距 */
}
.card {
  margin-top: -10px;
  padding: 16px;
  width: calc(33.333% - 30px); /* 减去间距以适应每行三个 */
  box-sizing: border-box;
  text-align: center;
  font-family: Arial, sans-serif;
  display: flex;
  height: 70%;
}
.icon {
  width: 56px;
  height: 56px;
  background-color: #007bff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 10px;
}
.icon img {
  width: 56px;
  height: 56px;
  vertical-align: middle;
}
.number {
  font-size: 32px;
  font-weight: bold;
  margin: 8px 0;
}
.info {
  font-size: 14px;
  color: #666;
  margin-left: 50px;
}
</style>
